<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>在线支付</p>
    </header>
    <!-- 订单信息部分 -->
    <h3>订单信息：</h3>
    <div class="order_info">
      <p>
        {{ data.order.business.businessName }}
        <el-icon @click="detailetShow"><ArrowDown /></el-icon>
      </p>
      <p>&#165;{{ data.order.orderTotal }}</p>
    </div>
    <!-- 订单明细部分 -->
    <ul class="order_detailet" v-show="isShowDetailet">
      <li v-for="item in data.order.list" :key="item.foodId">
        <p>{{ item.food.foodName }} x {{ item.quantity }} </p>
        <p>&#165;{{ item.food.foodPrice * item.quantity }}</p>
      </li>
      <li>
        <p>配送费</p>
        <p>&#165;{{ data.order.business.deliveryPrice }}</p>
      </li>
    </ul>
    <!-- 支付方式部分 -->
    <ul class="payment_type">
      <li>
        <img src="@/assets/alipay.png">
        <input id="支付1" type="radio" checked="checked" name="支付"/>
      </li>
      <li>
        <img src="@/assets/wechat.png">
        <input  type="radio" id="woman" name="支付">
      </li>
    </ul>
    <div class="payment_button">
      <button @click="confirmPayment">确认支付</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Footer from '../components/Footer.vue';
import request from "@/utils/request.js";
import { useRouter } from 'vue-router';
import {ArrowDown} from "@element-plus/icons-vue";


const data = reactive({
  order:{
    business:{},
    list:[]
  },
  orderId:0
})
const route = useRoute();
data.orderId = route.query.orderId

const isShowDetailet = ref(true);

const getOrderById = (orderId) => {
  request.get('/Orders/getOrdersById', {
    params:{
      orderId:data.orderId,
    }
  }).then(response => {
    data.order = response.data;
    console.log(data.order.list)

  }).catch(error => {
    console.error(error);
  });
};

onMounted(() => {
  getOrderById(data.orderId);
  // 监听popstate事件，防止用户返回到订单确认页面
  window.onpopstate = () => {
    router.push({ path: '/index' });
  };
});

onBeforeUnmount(() => {
  window.onpopstate = null;
});

const detailetShow = () => {
  isShowDetailet.value = !isShowDetailet.value;
};

// 支付
const confirmPayment = () => {
  alert("暂未开发，敬请期待")
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}
/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #17BAF9;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
/****************** 订单信息部分 ******************/
.wrapper h3 {
  margin-top: 12vw;
  box-sizing: border-box;
  padding: 4vw 4vw 0;
  font-size: 4vw;
  font-weight: 300;
  color: #999;
}
.wrapper .order_info {
  box-sizing: border-box;
  padding: 4vw;
  font-size: 4vw;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .order_info p:last-child {
  color: orangered;
}
/****************** 订单明细部分 ******************/
.wrapper .order_detailet {
  width: 100%;
}
.wrapper .order_detailet li {
  width: 100%;
  box-sizing: border-box;
  padding: 1vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .order_detailet li p {
  font-size: 3vw;
  color: #666;
}
/****************** 支付方式部分 ******************/
.wrapper .payment_type {
  width: 100%;
}
.wrapper .payment_type li {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .payment_type li img {
  width: 33vw;
  height: 8.9vw;
}
.wrapper .payment_type li .fa-check-circle {
  font-size: 5vw;
  color: #38CA73;
}
.wrapper .payment_button {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw;
}
.wrapper .payment_button button {
  width: 100%;
  height: 10vw;
  border: none;
  /*去掉外轮廓线*/
  outline: none;
  border-radius: 4px;
  background-color: #38CA73;
  color: #fff;
}

/* 设置单选按钮的基本样式 */
input[type="radio"] {
  -webkit-appearance: none; /* 移除默认样式 */
  appearance: none;
  width: 20px; /* 设置你想要的大小，这里是20px */
  height: 20px; /* 设置你想要的高度，这里是20px */
  border: 2px solid #ccc; /* 设置边框 */
  border-radius: 50%; /* 使边框为圆形 */
  outline: none; /* 移除焦点时的轮廓 */
  vertical-align: middle; /* 垂直居中 */
}

/* 设置选中状态的样式 */
input[type="radio"]:checked {
  background-color:  #38CA73; /* 选中时的背景颜色为绿色 */
  border-color:  #38CA73; /* 选中时的边框颜色也为绿色 */
}
</style>